<template>
	<view>
		<view class="login">
			<view class="login_t">
				<!-- <image src="../../static/bj.png" mode=""></image> -->
				<view class="login_text1">
					你好，
				</view>
				<view class="login_text2">
					欢迎来到城市一号代理端
				</view>

			</view>
			<view class="login_b">
				<view class="phoneView">
					<input type="number" v-model="phone" placeholder="输入手机号" maxlength="11"
						placeholder-style="color:#999999">
				</view>
				<view class="phoneView1 flex-row-center">
					<input class="flex1" type="number" v-model="code" placeholder="验证码" maxlength="6" placeholder-style="color:#999999">
					<view @click="sendMsg" class="button" v-if="msg=='获取验证码'">
						{{ msg }}
					</view>
					<view v-else class="button">
						{{ msg }}
					</view>
								
				</view>
			</view>
			<view class="xzView flex-row-flex-start flex1">
				<image @click="xzClik()" v-if="!isXz" class="icon" src="/static/login/no.png" mode=""></image>
				<image @click="xzClik()" v-if="isXz" class="icon" src="/static/login/yes.png" mode=""></image>
				我已阅读并同意 <text class="xyTitle" @click="topath()">《用户使用协议》</text>
			</view>

			<view @click="submit1" class="loginButton flex-row-center">
				登录
			</view>
		</view>
	</view>
</template>

<script>
	import {
		mapMutations,
		mapState
	} from 'vuex';
	export default {
		computed: {
			...mapState(['token', 'service_status', 'real_status']),
			// ...mapGetters(['isLogin']),

		},
		data() {
			return {
				clear: '',
				isXz: true,
				text: '商务接待、旅游出行、休闲娱乐、选城市一号。\n高端私人达人，一对一贴心服务。\n伴你度过愉快的每一天，期待你的到来，我在城市一号等你哦!',
				phone: '',
				code: '',
				code2: '',
				msg: '获取验证码',
				checked: true,
				readonly:false
			}
		},
		methods: {
			...mapMutations(['SET_MEMBER', 'SET_OPENID', 'setTOKEN']),
			xzClik() {
				this.isXz = !this.isXz
			},
			// 发送验证码
			topath() {
				uni.navigateTo({
					url: "/pages/privacy/privacy"
				})

			},
			async sendMsg() {
				if (this.readonly) {
					return;
				}
				if (!this.phone) {
					uni.showToast({
						title: '请输入手机号',
						icon: 'none'
					});
					return;
				}
				if (!this.$base.phoneRegular.test(this.phone)) {
					uni.showToast({
						title: '手机号格式不正确',
						icon: 'none'
					});
					return;
				}

				let data = await this.$u.api.smsSend({
					phone: this.phone,
					type: 0
				})
				console.log(data, "hahahhhhh");
				if (data) {
					this.getCodeState();
				}

				// 	uni.request({
				// 		url: 'https://play.bozhoukeji.cn/api/send/sms',
				// 		method: 'POST',
				// 		header: {
				// 			'Content-Type': 'application/json',
				// 			token: uni.getStorageSync("TOKEN")
				// 		},
				// 		data: {
				// 			phone: this.phone,
				// 			type: 2
				// 		},
				// 		success: res => {
				// 			console.log(res);
				// 			this.getCodeState();
				// 		},
				// 		fail: (err) => {
				// 			console.log(err);
				// 		},
				// 		complete: () => {}
				// 	});

				// this.$http.post('api/send/sms', {
				// 	phone: this.phone,
				// 	type: 'other'
				// }).then(res => {
				// 	console.log(res);
				// 	this.getCodeState();
				// });
			},
			//验证码按钮文字状态
			getCodeState() {
				const _this = this;
				_this.clear && clearInterval(_this.clear);

				this.readonly = true;
				this.msg = '120S';
				var s = 120;
				_this.clear = setInterval(() => {
					s--;
					_this.msg = s + 'S';
					if (s <= 0) {
						clearInterval(_this.clear);
						_this.msg = '获取验证码';
						_this.readonly = false;
					}
				}, 1000);
			},
			// submit1(){
			// 	uni.navigateTo({
			// 		url: '/pages/index/index' 
			// 	})
			// },
			async submit1() {
				if (!this.isXz) {
					uni.showToast({
						title: '请同意协议',
						icon: 'none'
					});
					return;
				}
				if (!this.phone) {
					uni.showToast({
						title: '请输入手机号',
						icon: 'none'
					});
					return;
				}
				console.log(this.checked, '*-*-');
				if (!this.checked) {
					uni.showToast({
						title: '请同意协议',
						icon: 'none'
					});
					return;
				}
				if (!this.$base.phoneRegular.test(this.phone)) {
					uni.showToast({
						title: '手机号格式不正确',
						icon: 'none'
					});
					return;
				}
				if (!this.code) {
					uni.showToast({
						title: '请输入验证码',
						icon: 'none'
					});
					return;
				}
				let data = await this.$u.api.phone_smscode({
					phone: this.phone,
					sms_code: this.code,

				});

				if (data) {
					console.log(data, 'data');
					if (data.data.token) {
						this.SET_MEMBER(data.data);
						this.setTOKEN(data.data.token);
						console.log(this.token);
						uni.$u.toast('登录成功');
						setTimeout(function() {
							uni.navigateTo({
								url: '/pages/index/index'
							})
						}, 2000);

					}



					// this.$store.commit('SET_OPENID', data.openid)

				}

			},
			getLogin() {

				let baseurl = ''
				if (process.env.NODE_ENV === 'development') {
					baseurl = 'https://play.bozhoukeji.cn/h5'; // 这里做一下转译，要不然微信会忽略到#后面的参数
				} else {
					baseurl = location.origin; // 这里做一下转译，要不然微信会忽略到#后面的参数
				}
				let redirectURL = encodeURIComponent(
					(
						baseurl +
						window.location.pathname +
						window.location.hash
					).split("&code")[0]
				); //获取地址
				console.log(redirectURL, '8998');

				const base = "https://open.weixin.qq.com/connect/oauth2/authorize?appid=";
				let appid = 'wx77787f136403fba8'; //应用授权作用域
				let scope = "snsapi_userinfo";

				window.location.href =
					base +
					appid +
					"&redirect_uri=" +
					redirectURL +
					"&response_type=code&scope=" +
					scope +
					'&state=' + encodeURIComponent(location.origin) +
					"#wechat_redirect";
				// uni.switchTab({
				// 	url: '/pages/index/indexNew'
				// });
				// setTimeout(() => {
				//         		uni.switchTab({
				//         			url: '/pages/index/indexNew'
				//         		});
				//                }, 2000)
			},


		}
	}
</script>

<style lang="scss">
	.login_t {
		width: 100%;
		height: 444rpx;
		background-image: url("../../static/bj.png");
		background-size: cover;
		background-repeat: no-repeat;
		background-position: center;
	}

	.login_text1 {
		padding-top: 122rpx;
		padding-bottom: 10rpx;
	}

	.login_text1,
	.login_text2 {
		// width: 144rpx;
		// height: 72rpx;
		padding-left: 48rpx;
		padding-right: 48rpx;
		font-size: 48rpx;
		font-family: PingFang SC-Bold, PingFang SC;
		font-weight: bold;
		color: #FFFFFF;
		line-height: 72rpx;

	}

	.login_b {
		margin-top: -130rpx;
		padding: 36rpx 60rpx;
		// width: 750rpx;
		// height: 942rpx;
		background: #FFFFFF;
		border-radius: 40rpx 40rpx 0rpx 0rpx;
		opacity: 1;
	}

	.phoneView {
		// margin: 26rpx 56rpx;
		padding-left: 44rpx;
		height: 106rpx;
		background: #F7F8FA;
		border-radius: 70rpx 70rpx 70rpx 70rpx;

		// opacity: 0.3;
		input {
			width: 100%;
			height: 100%;
			color: #999999;
		}
	}

	.phoneView1 {
		// margin: 26rpx 56rpx;
		margin-top: 48rpx;
		padding-left: 44rpx;
		height: 106rpx;
		background: #F7F8FA;
		border-radius: 70rpx 70rpx 70rpx 70rpx;

		// opacity: 0.3;
		input {
			// width: 100%;
			height: 100%;
			color: #999999;
		}
	}

	.button {
		width: 200rpx;
		font-size: 28rpx;
		font-family: PingFang SC-Medium, PingFang SC;
		// font-weight: 500;
		color: #999999;
	}

	.flex-row-center {
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: center;
	}

	.icon {
		width: 40rpx;
		height: 40rpx;
		margin-right: 10rpx;
	}

	.xzView {
		margin-left: 82rpx;
		margin-top: 4rpx;
		font-size: 24rpx;
		font-weight: 400;
		color: #333333;
	}

	.xyTitle {
		font-size: 24rpx;
		font-family: PingFang SC-Regular, PingFang SC;
		font-weight: 400;
		color: #8438FC;
	}

	.loginButton {
		margin: 40rpx 56rpx;
		height: 106rpx;
		background: linear-gradient(88deg, #C74BF0 0%, #8438FC 100%);
		border-radius: 70rpx 70rpx 70rpx 70rpx;
		opacity: 1;
		font-size: 32rpx;
		font-family: PingFang SC-Bold, PingFang SC;
		font-weight: bold;
		color: #FFFFFF;
	}
</style>